export default {
  created() {
    this.getData();
  },
  data() {
    return {
      rolesList: [],
      // 添加角色相关数据
      addDialogFormVisible: false,
      addForm: {
        roleName: "",
        roleDesc: "",
      },
      // 因为添加角色和编辑角色的规则一样可以使用同一个规则rules
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
        roleDesc: [
          { required: true, message: "请输入校色描述", trigger: "blur" },
        ],
      },
      // 编辑角色相关数据
      editDialogFormVisible: false,
      editForm: {
        roleName: "",
        roleDesc: "",
      },
      // 分配角色权限相关数据
      rightsDialogFormVisible: false,
      rightsTreeData: [],
      defaultProps: {
        children: "children",
        label: "authName",
      },
      checkedIdArr: [], // 哪些项目被选中的id的数组
      rightsRoleId: null,
    };
  },
  methods: {
    // 打开分配角色权限对话框
    async openRightsDialog(row) {
      const {
        data: { data, meta },
      } = await this.$http.get(`rights/tree`);
      if (meta.status !== 200) return this.$message.error("角色权限获取失败");
      // console.log(data);
      this.rightsTreeData = data;
      // 选中已有权限的复选款
      let arr = [];
      // 只需要第三级的权限ID
      row.children.forEach((item) => {
        item.children.forEach((subItem) => {
          subItem.children.forEach((lastItem) => {
            // 添加ID给arr数组
            arr.push(lastItem.id);
          });
        });
      });
      // 将添加ID的数组赋值给被选中的id数组
      this.checkedIdArr = arr;
      this.rightsRoleId = row.id;
      //在打开对话框
      this.rightsDialogFormVisible = true;
    },
    // 提交分配角色权限对话框
    async disRights() {
      // 1.获取全选的权限的ID方式
      const checkedArr = this.$refs.tree.getCheckedKeys();
      // 2.获取半选的权限的ID方式
      const halfCheckedArr = this.$refs.tree.getHalfCheckedKeys();
      // 3.合并
      const arr = [...checkedArr, ...halfCheckedArr];
      // console.log(arr);
      // 4.角色ID this.rightsRoleId
      const {
        data: { meta },
      } = await this.$http.post(`roles/${this.rightsRoleId}/rights`, {
        rids: arr.join(","),
      });
      if (meta.status !== 200) return this.$message.error("角色权限更新失败");
      // 5.成功
      this.rightsDialogFormVisible = false;
      this.$message.success(meta.msg);
      this.getData();
    },
    // 删除单个权限
    delRights(row, rightId) {
      // console.log(row);
      this.$confirm("亲，是否删除该权限", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 进行删除 准备 角色ID roleId 权限ID rightId
          // 需要data(修改后的权限数据) 用于局部的更新展开项
          // 当获取的所有角色列表信息 rolesList
          // 去修改 rolesList 中的当前一项角色的数据 scope.row
          // scope.row.children 就是权限数据
          // 结论：scope.row.children = data 即可
          const {
            data: { data, meta },
          } = await this.$http.delete(`roles/${row.id}/rights/${rightId}`);
          if (meta.status !== 200)
            return this.$message.error("删除角色权限失败");
          // 通过当前实例中的数据是获取不到当前行的数据的
          // 在 template 是可以获取 row的数据
          // delRights 就是在 template 调用的
          row.children = data;
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 打开编辑角色对话框
    openEditDialog(row) {
      this.editDialogFormVisible = true;
      // console.log(row);
      this.$nextTick(() => {
        // 重置表单（数据 样式）
        this.$refs.editForm.resetFields();
        // 填充数据row
        // 将来提交的时候需要用到id
        this.editForm.roleName = row.roleName;
        this.editForm.roleDesc = row.roleDesc;
        this.editForm.id = row.id;
      });
    },
    // 发送编辑角色请求
    editRole() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          const {
            data: { meta },
          } = await this.$http.put(`roles/${this.editForm.id}`, {
            roleName: this.editForm.roleName,
            roleDesc: this.editForm.roleDesc,
          });
          if (meta.status !== 200) return this.$message.error(meta.msg);
          // 编辑角色成功
          this.editDialogFormVisible = false;
          this.getData();
        }
      });
    },
    // 删除角色
    delRole(roleId) {
      this.$confirm("亲，是否删除该角色?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const {
            data: { meta },
          } = await this.$http.delete(`roles/${roleId}`);
          if (meta.status !== 200) {
            return this.$message.error("删除角色失败");
          } else {
            this.getData();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch(() => null);
    },
    // 打开添加角色对话框
    openAddDialog() {
      this.addDialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs.addForm.resetFields();
      });
    },
    // 发送添加角色请求
    addRole() {
      // 1.验证整个表单
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          // 2.知道提交的数据有哪些? roleName roleDesc --> addForm
          const {
            data: { data, meta },
          } = await this.$http.post("roles", this.addForm);
          console.log(data, meta);
          if (meta.status !== 201) {
            return this.$message.error(meta.msg);
          }
          // 3.表格验证成功
          this.$message.success(meta.msg);
          this.addDialogFormVisible = false;
          this.getData();
        }
      });
    },
    async getData() {
      // 获取角色列表数据
      const {
        data: { data, meta },
      } = await this.$http.get("roles");
      if (meta.status !== 200)
        return this.$message.error("获取角色列表数据失败");
      this.rolesList = data;
    },
  },
};
